import { onMounted, onUnmounted } from "vue";

export default function useDrag(uploadContainerRef) {
  //   处理拖动事件;
  const handleDrag = (event) => {
    event.preventDefault();
    event.stopPropagation();
  };
  // 处理文件释放事件：handleDrop
  const handleDrop = (event) => {
    event.preventDefault();
    event.stopPropagation();
    const files = event.dataTransfer.files;
    console.log("Dropped files:", files);
  };

  onMounted(() => {
    const uploadContainer = uploadContainerRef.value;
    if (uploadContainer) {
      uploadContainer.addEventListener("dragenter", handleDrag);
      uploadContainer.addEventListener("dragover", handleDrag);
      uploadContainer.addEventListener("drop", handleDrop);
      uploadContainer.addEventListener("dragleave", handleDrag);
    }
  });

  onUnmounted(() => {
    const uploadContainer = uploadContainerRef.value;
    if (uploadContainer) {
      uploadContainer.removeEventListener("dragenter", handleDrag);
      uploadContainer.removeEventListener("dragover", handleDrag);
      uploadContainer.removeEventListener("drop", handleDrop);
      uploadContainer.removeEventListener("dragleave", handleDrag);
    }
  });

  return {};
}
